<template>
  <div>
    <h1>注册页面</h1>
    <table class="table table-bordered">
      <tr>
        <td align="right">用户名:</td>
        <td><input type="text" v-model="regiserData.username" /></td>
      </tr>
      <tr>
        <td align="right">密码:</td>
        <td><input type="password" v-model="regiserData.userPwd" /></td>
      </tr>
      <tr>
        <td align="right"></td>
        <td><input type="button" value="注册" class="btn btn-success" @click="register" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
let router = useRouter();

let data = reactive({
  regiserData: {
    username: '',
    userPwd: ''
  }
})
let { regiserData } = toRefs(data)

//注册
const register = () => {
  //1.验证不能为空
  if (regiserData.value.username == '') {
    alert('用户名不能为空')
    return
  }
  if (regiserData.value.userPwd == '') {
    alert('密码不能为空')
    return
  }
  //2.发送网络请求注册数据
  axios({
    url: 'http://localhost:49846/api/Users/PostRegisterUserInfo', //发送请求的地址
    method: 'post', //请求方式
    data: {
      UL_Name:regiserData.value.username,
      UL_Pwd:regiserData.value.userPwd 
    }
  })
    .then((res: any) => {
      //请求成功之后的回调函数
      console.log(res)
      if(res.data==-1){
        alert("用户名已经存在")
        return;
      }else{
        alert("注册成功")
        router.push("/login")
      }
    })
    .catch((err: any) => {
      //请求失败之后的回调函数
      console.log(err)
    })
}
</script>

<style scoped></style>
